<template>
  <div class="mb-5 p-2 new_item" @click="playSong">
    <div class="item flex items-center rounded cursor-pointer pr-3">
      <div class="relative flex-shrink-0">
        <lt-avatar :src="item.picUrl" size="60"></lt-avatar>
        <span class="absolute play_btn iconfont icon-bofang text-2xl"></span>
      </div>
      <div class="flex w-full ml-2 justify-between items-center">
        <div>
          <div class="text">{{ item.name }}</div>
          <div class="text-gray-400 text-sm">{{ item.song.artists[0].name }}</div>
        </div>
        <div>
          <span class="more_btn iconfont icon-aixin" @click.stop="onClickMore('like')"></span>
          <span class="more_btn iconfont icon-xiazai mx-4" @click.stop="onClickMore('dowm')"></span>
          <span class="more_btn iconfont icon-liebiao" @click.stop="onClickMore('more')"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import ltAvatar from '../../base-ui/avatar/index.vue'

const prop = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['onClickMore', 'playSong'])
const onClickMore = (type) => {
  emit('onClickMore', { type, item: prop.item })
}
const playSong = () => {
  emit('playSong', prop.item)
}
</script>

<style scoped>
.item:hover {
  background-color: var(--inputBg);

  & .play_btn {
    opacity: 1;
  }

  & .more_btn {
    opacity: 1;
  }
}

.new_item {
  width: calc((100% - 0.5rem) / 2);

  .play_btn {
    left: 50%;
    top: 50%;
    color: var(--active);
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  .more_btn {
    opacity: 0;
  }
}

@media (min-width: 1200px) {
  .new_item {
    width: calc((100% - 0.5rem) / 3);
  }
}
</style>
